<template>
  <ul class="follow-list">
    <li>
      <div class="follow-top">
        <img src="http://img0.imgtn.bdimg.com/it/u=2577022489,1269768065&fm=26&gp=0.jpg" alt="">
        <div class="username">xixi公主</div>
        <p>
          <span class="times">1分钟前</span>
          <span class="show">宝宝2岁</span>
        </p>
      </div>
      <div class="cont">
        <p>清晨起来打开窗，阳光美美哒，看着蝴蝶闻花香，风景美美哒，你在远处看着我，笑容美美哒，我的心就像朵花儿，开的美美哒，我爱你你爱我，感情美美哒，爸爸妈妈身体好，亲情美美哒...
        </p>
        <button>全文</button>
      </div>
      <div class="imgs">
        <img src="http://img07.tooopen.com/images/20170810/tooopen_sy_219812276912.jpg" alt="">
      </div>
      <ul class="follow-bottom">
        <li><i class="iconfont icon-fenxiangfangshi"></i><span>分享</span></li>
        <li><i class="iconfont icon-comment-w"></i><span>评论</span></li>
        <li><i class="iconfont icon-shoucang1"></i><span>999</span> </li>
      </ul>
    </li>
    <li>
      <div class="follow-top">
        <img src="http://img0.imgtn.bdimg.com/it/u=3873931720,3231501834&fm=26&gp=0.jpg" alt="">
        <div class="username">xixi公主</div>
        <p>
          <span class="times">1分钟前</span>
          <span class="show">宝宝2岁</span>
        </p>
      </div>
      <div class="cont">
        <p>清晨起来打开窗，阳光美美哒，看着蝴蝶闻花香，风景美美哒，你在远处看着我，笑容美美哒，我的心就像朵花儿，开的美美哒，我爱你你爱我，感情美美哒，爸爸妈妈身体好，亲情美美哒...
        </p>
        <button @click="btn">全文</button>
      </div>
      <div class="imgs">
        <img src="http://img07.tooopen.com/images/20170227/tooopen_sy_199852016431.jpg" alt="">
      </div>
      <ul class="follow-bottom">
        <li><i class="iconfont icon-fenxiangfangshi"></i><span>分享</span></li>
        <li><i class="iconfont icon-comment-w"></i><span>评论</span></li>
        <li><i class="iconfont icon-shoucang1"></i><span>999</span> </li>
      </ul>
    </li>
  </ul>
</template>
<script>
import axios from 'axios'
import Qs from 'qs'
export default {
  data () {
    return {
      user: []
    }
  },
  created () {
    let data = {
      token: '7qwN83Y2xI2xasQikfLHvwFwLQKxxk5wZyi6Ej+So2Vx1864is3FP2c+zr18HzNAC7fzHZHbmLDWwJraATqJ+cjyp9aSekyCKPoiVit0kHqEJYNu3/HhVAqSW1YJBo9GtG4aH2RSdJ194HC4Slo8wLMBKgvd61ZSGeyJJ80HEnPtUff6/csmpBFsSlXoVRN+DygYwJsRRi2im1HkL0zDJr9GL1nJSxfJLr2+3dEGuEGyDJYuS6aGVaSzY7BCGX2OBspUNJw5BuYR/t3hvUWPCYbfCSehfNHALihJVTJ39LLJ9d/uyc4ciyBA5ZbusTst'
    }
    axios({
      // headers: {
      //   'deviceCode': 'A95ZEF1-47B5-AC90BF3'
      // },
      method: 'post',
      url: 'http://10.8.162.3:8081/communitybycid.do',
      data: Qs.stringify(data)
    })
      .then((res) => {
        console.log(res)
        const obj = res.data.list
        this.users = obj
        console.log(this.users)
      })
      .catch(function (error) {
        console.log(error)
      })
  },
  methods: {
    btn () {
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
header {
  height: 0.46rem;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0);
  ul {
    @include rect(100%, 100%);
    @include flexbox();
    @include justify-content();
    @include align-items();
    li {
      width: 0.94rem;
      height: 0.24rem;
      text-align: center;
    }
    .hover {
      @include background-color(#F8F8F8);
      color: #EF98A9;
    }
  }
}
.follow-list {
  background: rgb(252, 252, 252);
  li {
    margin-bottom: 0.2rem;
    background: rgba(242, 242, 242, 0.877);
    overflow: hidden;
    .follow-top {
      @include rect(100%, 0.44rem);
      margin: 0.2rem 0;
      img {
        float: left;
        @include rect(0.44rem, 0.44rem);
        @include margin(0 0.1rem 0 0.22rem);
        border-radius: 50%;
      }
      .username, p {
        @include rect(70%, 0.22rem);
        float: left;
        line-height: 0.23rem;
        font-size: 0.14rem;
        background-color: rgba(255, 255, 255, 0);
        color: rgba(111, 110, 110, 1);
        box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
        font-family: Arial;
        border: 1px solid rgba(255, 255, 255, 0);
      }
      p {
        font-size: 0.1rem;
        color: rgba(166, 164, 164, 1);
        box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
        font-family: Arial;
      }
    }
    .cont {
      @include rect(100%, 1.18rem);
      position: relative;
      p {
        @include rect(3.36rem, 0.8rem);
        color: rgba(94, 94, 94, 1);
        font-size: 0.14rem;
        text-align: justify;
        font-family: PingFangSC-regular;
        margin-left: 0.18rem;
      }
      button {
        position: absolute;
        bottom: 0.02rem;
        left: 0.18rem;
        border: none;
        width: 0.3rem;
        height: 0.20rem;
        line-height: 0.15rem;
        background-color: rgba(255, 255, 255, 0);
        color: rgba(94, 94, 94, 1);
        font-size: 0.10rem;
        text-align: left;
        box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
        font-family: Arial;
        border: 1px solid rgba(255, 255, 255, 0);
      }
    }
    .imgs {
      @include rect(3.48rem, 1.52rem);
      margin:0.12rem 0.13rem;
      border: 1px solid rgba(255, 255, 255, 0);
      img {
        @include rect(100%, 100%);
      }
    }
    .follow-bottom {
      @include rect(100%, 0.4rem);
      @include flexbox();
      @include justify-content(space-around);
      @include align-items();
      li {
        margin-bottom: 0.1rem;
        font-size: 0.12rem;
        line-height: 0.2rem;
        span {
          margin-left: 0.05rem;
        }
      }
    }
  }
}
</style>
